<template>
  <div class="flex flex-column h-100">
    <div class="flex justify-end  flex-wrap">
      <el-select
        v-model="queryData.workorderType"
        clearable
        style="width: 200px"
        class="mr-10 mb-10"
        :placeholder="$t('WORKORDER_TYPE')"
      >
        <el-option
          v-for="item in dictList.WORKORDER_TYPE"
          :key="item.id"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
      <el-date-picker
        v-model="queryData.dateTime"
        style="width: 320px"
        class="ml-10 mb-10"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        range-separator="-"
        :start-placeholder="$t('START_TIME')"
        :end-placeholder="$t('END_TIME')"
        align="right"
      />
      <el-input
        v-model="form.startNeId"
        class="ml-10 mb-10"
        style="width: 200px"
        size="mini"
        clearable
        :placeholder="$t('NUMBER_NE_END_A')"
        @keyup.enter.native="$debounce(search)"
      />
      <el-input
        v-model="form.endNeId"
        class="ml-10 mb-10"
        style="width: 200px"
        size="mini"
        clearable
        :placeholder="$t('NUMBER_Z_END_NE')"
        @keyup.enter.native="$debounce(search)"
      />
      <el-input
        v-model.trim="queryData.workorderName"
        maxlength="32"
        style="width: 200px"
        class="ml-10 mb-10"
        clearable
        :placeholder="$t('WORKORDER_NAME')"
        @keyup.enter.native="$debounce(search)"
      />
      <el-button type="primary" class="ml-10 mb-10" @click="$debounce(search)">{{ $t('QUERY') }}</el-button>

    </div>
    <el-table :data="tableData" border height="100%">
      <template slot="empty">
        <NullData />
      </template>
      <el-table-column
        :label="$t('WORKORDER_NUMBER')"
        width="160"
        show-overflow-tooltip
        align="left"
        prop="workorderId"
      />
      <el-table-column
        :label="$t('WORKORDER_NAME')"
        width="100"
        show-overflow-tooltip
        align="left"
        prop="workorderName"
      />
      <el-table-column
        :label="$t('WORKORDER_TYPE')"
        width="100"
        show-overflow-tooltip
        align="left"
        prop="workorderType"
      >
        <template slot-scope="scope">
          <span>{{ setWordkType(scope.row.workorderType) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('NUMBER_NE_END_A')"
        width="160"
        show-overflow-tooltip
        align="left"
        prop="startNeId"
      />
      <el-table-column
        :label="$t('PORT_NE_END_A')"
        min-width="160"
        show-overflow-tooltip
        align="left"
        prop="startNePorts"
      />
      <el-table-column
        :label="$t('NUMBER_Z_END_NE')"
        min-width="160"
        show-overflow-tooltip
        align="left"
        prop="endNeId"
      />
      <el-table-column
        :label="$t('PORT_NE_END_Z')"
        min-width="160"
        show-overflow-tooltip
        align="left"
        prop="endNePorts"
      />
      <el-table-column
        :label="$t('ACCEPT_TIMELIMIT')"
        min-width="160"
        show-overflow-tooltip
        align="left"
        prop="acceptTime"
      />
      <el-table-column
        :label="$t('PROCESSING_TIMELIMIT')"
        min-width="160"
        show-overflow-tooltip
        align="left"
        prop="dealTime"
      />
      <el-table-column
        :label="$t('DEGREE_EMERGENCY')"
        min-width="100"
        show-overflow-tooltip
        align="left"
        prop="urgentDegree"
      />
      <el-table-column
        :label="$t('BANDWIDTH')"
        min-width="100"
        show-overflow-tooltip
        align="left"
        prop="bandwidth"
      />
      <el-table-column
        :label="$t('CONFIRMER')"
        min-width="100"
        show-overflow-tooltip
        align="left"
        prop="confirmer"
      />
      <el-table-column
        :label="$t('CONFIRMTIME')"
        min-width="160"
        show-overflow-tooltip
        align="left"
        prop="confirmTime"
      />
      <el-table-column
        :label="$t('ACCEPTSTATUS')"
        min-width="100"
        show-overflow-tooltip
        align="left"
        prop="acceptStatus"
      >
        <template slot-scope="scope">
          <span>{{ setWordkacceptStatus(scope.row.acceptStatus) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('CREATION_TIME')"
        width="100"
        show-overflow-tooltip
        align="left"
        prop="createTime"
      />
      <el-table-column :label="$t('OPERATE')" class-name="operate-cell" :width="resetSize(80)" fixed="right" align="left">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.acceptStatus === 'NOT_ACCEPT' && permission.confirm"
            type="text"
            size="small"
            @click="comfirmAlert(scope.row.id)"
          >
            {{ $t('CONFIRM') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="text-right mt-10"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total"
      :page-size="pageData.size"
      :current-page="pageData.page"
      @size-change="sizeChange"
      @current-change="currentChange"
    />

    <!--确认工单原因-->
    <el-dialog
      :title="alarmTitle"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="20%"
      @close="dialogVisible = false"
    >
      <div>
        <span>{{ alarmInfo }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('CANCEL') }}</el-button>
        <el-button type="primary" @click="comfirm">{{ $t('CONFIRM') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import WorkorderApi from '@/api/oen/WorkorderApi'
  import { pickerOptionsClassMonth } from '@/utils/common'
  const searchData = {} // 查询参数 只有点了查询有效
  export default {
    data() {
      return {
        form: {
          confirmDesc: ''
        },
        descRules: {
          confirmDesc: [
            {
              required: true,
              message: this.$t('ENTER_THE_ALARM_CAUSE'),
              trigger: 'blur'
            } // '请填写确认告警原因'
          ]
        },
        queryData: {
          workorderType: '',
          dateTime: '',
          workorderName: '',
          startNeId: '',
          endNeId: ''
        },
        dialogVisible: false,
        tableData: [],
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        pickerOptions: pickerOptionsClassMonth(this),
        alarmStatus: '', // 修改告警状态
        currAlarm: null, // 当前选择告警
        alarmTitle: this.$t('ALARM_CONFIRM'), // '告警确认',
        alarmInfo: this.$t('YES_NO_CONFIRM_ALARM'), // '是否确认所选当前告警？',
        placeholder: this.$t('ENTER_THE_ALARM_CAUSE') // '请填写确认告警原因'
      }
    },
    computed: {
      ...mapGetters(['dictList', 'getUser']),
      permission() {
        return this.$store.getters.getAuthData('biz:workorder')
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      search() {
        this.pageData.page = 1
        if (this.queryData.workorderType) {
          searchData.workorderType = this.queryData.workorderType
        }
        if (this.queryData.startNeId) searchData.startNeId = this.queryData.startNeId
        if (this.queryData.endNeId) searchData.endNeId = this.queryData.endNeId
        if (this.queryData.workorderName) {
          searchData.workorderName = this.queryData.workorderName
        }
        if (this.queryData.dateTime) {
          searchData.startTime = this.queryData.dateTime[0]
          searchData.endTime = this.queryData.dateTime[1]
        }
        this.loadData()
      },
      loadData() {
        // 获取列表
        const data = {
          ...this.pageData,
          ...searchData
        }
        WorkorderApi.getWorkorderList(data).then(res => {
          if (res) {
            const { list, total } = res
            this.tableData = list
            this.pageData.total = total
          }
        })
      },
      sizeChange(size) {
        this.pageData.size = size
        this.loadData()
      },
      currentChange(page) {
        this.pageData.page = page
        this.loadData()
      },
      comfirmAlert(workOrderId) {
        this.dialogVisible = true
        this.workOrderId = workOrderId
        this.alarmTitle = this.$t('WORK_CONFIRM') // '告警确认',
        this.alarmInfo = this.$t('YES_NO_CONFIRM_WORK') // '是否确认所选当前告警？'
        this.alarmStatus = 'CONFIRM'
      },
      comfirm() {
        // 确认工单
        WorkorderApi.confirm({ workOrderId: this.workOrderId }).then(res => {
          if (res) {
            this.dialogVisible = false
            this.$message.success(this.$t('EXECUTE_RESULT_SUCCESS'))
            this.loadData()
          }
        })
      },
      setWordkType(type) {
        // 工单类型
        const wtype = this.dictList.WORKORDER_TYPE.find(item => item.value === String(type))
        return wtype ? wtype.label : ''
      },
      setWordkacceptStatus(status) {
        // 受理状态
        const statusData = this.dictList.WORKORDER_ACCEPT_STATUS.find(
          item => item.value === String(status)
        )
        return statusData ? statusData.label : ''
      },
      setWordkdealStatus(status) {
        // 处理状态
        const statusData = this.dictList.WORKORDER_DEALSTATUS.find(
          item => item.value === String(status)
        )
        return statusData ? statusData.label : ''
      }
    }
  }
</script>

<style scoped></style>
